<template>
  <KView class="coupon-bg-view">
    <KView class="coupon-bg-view-header-div">
      <KView class="coupon-bg-view-img">
        <img :src="bgImg" mode="widthFix">
      </KView>
      <KView class="coupon-bg-view-header">
        <KView class="coupon-bg-view-header-back" @click="toBack">
          <sys-svg name="arrowLeft" color="#ffffff"></sys-svg>
        </KView>
        <KView class="coupon-bg-view-header-search">
          <search-input v-model="searchValue" placeholder="输入关键字搜索" @click="toSearchData"></search-input>
        </KView>
      </KView>
    </KView>
    <KView class="coupon-bg-view-content" :class="{'has-footer':hasFooter}">
      <slot></slot>
    </KView>
    <KView v-if="hasFooter" class="coupon-bg-view-footer">
      <KView>
        <KButton class="coupon-bg-view-footer-btn" @click="lookMyCoupon">
          <KView class="coupon-bg-view-footer-btn__view">
            <KView class="footer-btn__view-icon">
              <sys-svg name="coupon" color="#81848a"></sys-svg>
            </KView>
            <KView class="footer-btn__view-text">我的优惠券</KView>
          </KView>
        </KButton>
        <KView class="coupon-bg-view-footer-btn-line"></KView>
      </KView>
      <KView>
        <KButton v-if="isMiniprogram" class="coupon-bg-view-footer-btn" open-type="share">
          <KView class="coupon-bg-view-footer-btn__view">
            <KView class="footer-btn__view-icon">
              <sys-svg name="share2" color="#81848a"></sys-svg>
            </KView>
            <KView class="footer-btn__view-text">分享优惠</KView>
          </KView>
        </KButton>
      </KView>
    </KView>
  </KView>
</template>

<script>
  import GlobalData from 'utils/globalData';

  import SysSvg from 'common/sysSvg';
  import SearchInput from 'common/searchInput';

  export default {
    props: {
      hasFooter: {
        type: Boolean,
        default: false
      }
    },

    data() {
      return {
        isMiniprogram: process.env.isMiniprogram,
        bgImg: GlobalData.images.sysCoupon.bg,
        searchValue: ''
      };
    },

    methods: {
      toBack() {
        this.$emit('to-back');
      },

      toSearchData() {
        this.$emit('search-data');
      },

      lookMyCoupon(){
        this.$emit('my-coupon');
      }
    },

    components: {
      SysSvg,
      SearchInput
    }
  };

</script>

<style lang="scss">
  .coupon-bg-view {
    height: 100%;

    .coupon-bg-view-header-div {
      height: formatPx(410);
      position: relative;

      .coupon-bg-view-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: formatPx(410);

        img {
          width: 100%;
        }
      }

      .coupon-bg-view-header {
        position: absolute;
        top: formatPx(34);
        left: 0;
        width: calc(100% - #{formatPx(60)});
        height: formatPx(64);
        padding: 0 formatPx(30);

        .coupon-bg-view-header-back {
          width: formatPx(36);
          height: 100%;
          float: left;
          margin-right: formatPx(20);
        }

        .coupon-bg-view-header-search {
          width: calc(100% - #{formatPx(56)});
          height: 100%;
          float: left;

          .search-input .search-input-content>input {
            background: #ffffff;
          }
        }
      }
    }

    .coupon-bg-view-content {
      height: 100%;
      overflow: auto;

      &.has-footer {
        height: calc(100% - #{formatPx(80)});
      }
    }

    .coupon-bg-view-footer {
      height: formatPx(80);
      background: #ffffff;
      box-shadow: 0 formatPx(2) formatPx(10) formatPx(5) rgba(0, 0, 0, .14);
      display: flex;

      >div {
        flex: 1;
        height: 100%;
        min-width: 0;
        border-right: 1px solid transparent;
        position: relative;

        &:last-child {
          border-right: none;
        }

        .coupon-bg-view-footer-btn {
          width: 100%;
          height: 100%;
          border: none;
          background: none;
          padding: 0;
          font-weight: normal;
          text-align: center;

          .coupon-bg-view-footer-btn__view {
            height: 100%;
            display: inline-block;

            >div {
              float: left;
              height: 100%;
            }

            .footer-btn__view-icon {
              width: formatPx(40);
              margin-right: formatPx(12);
            }

            .footer-btn__view-text {
              color: #81848a;
              line-height: formatPx(80);
              font-size: formatPx(24);
            }
          }
        }
      }

      .coupon-bg-view-footer-btn-line {
        position: absolute;
        width: 1px;
        height: formatPx(34);
        background: #d2d2d2;
        top: formatPx(23);
        right: -1px;
      }
    }
  }

</style>
